<%@page import="org.smartercontext.contextmger.DTO.BooksDTO"%>
<%@page import="org.smartercontext.contextmger.DTO.MovieDTO"%>
<%@page import="org.smartercontext.contextmger.DTO.MusicDTO"%>
<%@page import="java.util.List"%>
<%@page import="org.smartercontext.contextmger.utilities.GetMMB"%>
<%@page import="com.hp.hpl.jena.rdf.model.Model"%>
<%@page import="org.smartercontext.contextmger.contextsphere.ContextManagerController"%>
<%@page contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	               "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Music, Movies & Books</title>
    <!-- Bootstrap core CSS -->
    <link rel="shortcut icon" href="Icons/scicon.png">
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="http://getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style type="text/css"></style>
 </head>
   <body style="background-color: #eee;">
<%
	
		if(session.getAttribute("username")==null){
			response.sendRedirect("login.jsp?Err=3");
		}
	
	%>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.jsp">
          <img src="Images/logoSmartContext_CircleH.png">
          <img src="Images/logoSmartContext_header.png"></a>
        </div>
        
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
          	<li><a href="index.jsp">Home</a></li>
            <li class="active"><a href="manageContext.jsp">Manage your context</a></li>
            <li><a href="recommendations.jsp">Recommendations</a></li>
            <li><a href="linkWith.jsp">Link with...</a></li>
            <li><a href="logout.jsp">Logout</a></li>
          </ul>
          <form class="navbar-form navbar-right" action="">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div><!--/.nav-collapse -->
      </div>
    </div>

	<div class="container-fluid">
	 <div class="row">
	 	 <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li><a href="manageContext.jsp">Overview</a></li>
            <li><a href="manageContext_Profile.jsp">Profile</a></li>
            <li><a href="manageContext_W&S.jsp">Work & Study</a></li>
            <li><a href="manageContext_F&F.jsp">Friends & Family</a></li>
            <li class="active"><a href="manageContext_M&M.jsp">Movies, Music & Books</a></li>
            <li><a href="manageContext_Products.jsp">Products</a></li>
            <li><a href="manageContext_PaymentM.jsp">Preferred Payment Method</a></li>
            <li><a href="PrintRDFGraphServlet" target="_blank">Watch my RDF Graph</a></li>
          </ul>
        </div>
      </div>
     </div>
     
     <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
     	<h1 class="page-header">Music, Movies & Books</h1>
     	<p><a href="javascript:addMMB()"><img src="Icons/music.jpg"><img src="Icons/movies.png"><img src="Icons/book.png"><strong>Add your music, movies and books preferences</strong></a></p>
     	<div style="text-align: center;">
     		<form action="AddMMBServlet" id="formActionM">
     			<table class="table table-striped" id="tableMMB" style="text-align: left;">
     				<thead>
     					<tr>
     						<th>Name</th>
     						<th>Category</th>
     					</tr>
     				</thead>
     				<tbody id="tbodyM">
     				
     				</tbody>
     			</table>
     			<% 
     			if(request.getQueryString()!=null){
     				String error = request.getParameter("Error");
     				if(error.equals("1")){
     					out.println("<p style=\"color:maroon\">Error: The preference hasn't added to your context sphere</p>");
     				}else if(error.equals("2")){
     					out.println("<p style=\"color:maroon\">Error: The preference hasn't modified</p>");
     				}else if(error.equals("3")){
     					out.println("<p style=\"color:maroon\">Error: The preference hasn't deleted</p>");
     				}
     			}
     			%>
     			<button class="btn btn-sm btn-primary" type="submit" id="subM" style="width: 10em; height: 3em;" disabled="disabled">Save changes</button>
     		</form>
     		
     		<table class="table table-striped" id="tablePrefs" style="text-align: left;">
     			<thead>
     				<tr>
     					<th>Name</th>
     					<th>Category</th>
     					<th>Options</th>
     				</tr>
     			</thead>
     			<tbody>
     				<%
     				
     					if(session.getAttribute("username")!=null){
     						
     						String username = session.getAttribute("username").toString();
     						ContextManagerController.contextManagerController();
     						Model usermodel = ContextManagerController.getUsermodel(username);
     						
     						GetMMB gmmb = new GetMMB();
     						gmmb.getMMB(usermodel, username);
     						
     						List<MusicDTO>musPrefs = gmmb.getMusicPrefs();
     						List<MovieDTO>movPrefs = gmmb.getMoviesPrefs(); 
     						List<BooksDTO>booPrefs = gmmb.getBooksPrefs();
     						
     						for(int i=0;i<musPrefs.size();i++){
     							MusicDTO temp = musPrefs.get(i);
     							String name = temp.getName();
     							out.println("<tr><td>"+name+"</td><td>Music</td><td><a href=\"javascript:edit_mu('"+name+"');\">Edit</a> - <a href=\"javascript:deleteMMB('"+name+"');\">Delete</td></tr>");
     						}
     						
     						for(int i=0;i<movPrefs.size();i++){
     							MovieDTO temp = movPrefs.get(i);
     							String name = temp.getName();
     							out.println("<tr><td>"+name+"</td><td>Movies</td><td><a href=\"javascript:edit_mo('"+name+"');\">Edit</a> - <a href=\"javascript:deleteMMB('"+name+"');\">Delete</td></tr>");
     						}
     						
     						for(int i=0;i<booPrefs.size();i++){
     							BooksDTO temp = booPrefs.get(i);
     							String name = temp.getName();
     							out.println("<tr><td>"+name+"</td><td>Books</td><td><a href=\"javascript:edit_bo('"+name+"');\">Edit</a> - <a href=\"javascript:deleteMMB('"+name+"');\">Delete</td></tr>");
     						}
     						
     					}
     				%>
     			</tbody>
     		</table>
     		
     	</div>
     </div>
     

 <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
    <script type="text/javascript" charset="ISO-8859-1">
    	
    var counter = 0;
    var counter1 = 0;
    var counter2 = 0;
    var deleteR = 0;
    var deleteR1 = 0;
    var deleteR2 = 0;
    var dataM = [];
    var dataD = [];
    
    	function altFormAction(actionF){
    		document.getElementById("formActionM").action = actionF;
    		document.getElementById("subM").disabled = false;
    	}
    	
    	function scanDeleteModify(){
    		if(deleteR == 0){
    			
    			var table = document.getElementById("tbodyM").getElementsByTagName("tr").length;
    			for(var i=0;i<table;i++){
    				document.getElementById("tbodyM").deleteRow(0);
    				
    			}
    			
    			deleteR = 1;
    			deleteR1 = 0;
    			dataD = [];
    			deleteR2 = 0;
    		}
    	}
    	
    	function scanDeleteDelete(){
			if(deleteR1 == 0){
    			
    			var table = document.getElementById("tbodyM").getElementsByTagName("tr").length;
    			for(var i=0;i<table;i++){
    				document.getElementById("tbodyM").deleteRow(0);
    				
    			}
    			
    			deleteR1 = 1;
    			deleteR = 0;
    			dataM = [];
    			deleteR2 = 0;
    		}
    	}
    
		function enableButton(id){
    		
    		idJ = "nameJAV"+id;
    		
    		if(document.getElementById(idJ).value !=""){
    			document.getElementById("subM").disabled = false;
    		}else{
    			document.getElementById("subM").disabled = true;
    		}
    		
    	}
		
		function addMMB(){
			altFormAction('AddMMBServlet');
			
			if(deleteR2 == 0){
				
				var table = document.getElementById("tbodyM").getElementsByTagName("tr").length;
    			for(var i=0;i<table;i++){
    				document.getElementById("tbodyM").deleteRow(0);
    				
    			}
    			
    			deleteR2 = 1;
    			deleteR = 0;
    			deleteR1 = 0;
    			dataD = [];
    			dataM = [];
			}
			
			 var newRow = document.createElement('tr');
			 newRow.innerHTML = "<tr><td>New name: <input type='text' name='nameJAV"+counter2+"' value='"+name+"' onchange='enableButton("+counter+") size='40'></td>"+
	  		   "<td><input type='radio' name='typeJAV"+counter2+"' value='Music'>Music"+
	  		   "<input type='radio' name='typeJAV"+counter2+"' value='Movies' checked ='checked'>Movies"+
	  		   "<input type='radio' name='typeJAV"+counter2+"' value='Books' >Books"+
	  		   " </td>"+
	  		   "</tr>";
  		 
  		   document.getElementById("tbodyM").appendChild(newRow);
  		   counter2++;
			 
			
		}
    	
    	function edit_mu(name){
    	    altFormAction('ModifyMMBServlet');
    	    scanDeleteModify();
    	    
    	   var exists = dataM.indexOf(name);
    	   
    	   if(exists == -1){
    		   dataM.push(name);
    		   
    		   var newRow = document.createElement('tr');
    		   newRow.innerHTML = "<tr><td>Old name: <input type='text' name='nameOJAV"+counter+"' value='"+name+"' readonly size='40'>New name:<input type='text' name='nameJAV"+counter+"' value='"+name+"' id='nameJAV"+counter+"' onchange='enableButton("+counter+");' placeholder='Name' size='40'></td>"+
    		   "<td><input type='radio' name='typeJAV"+counter+"' value='Music' checked='checked'>Music"+
    		   "<input type='radio' name='typeJAV"+counter+"' value='Movies'>Movies"+
    		   "<input type='radio' name='typeJAV"+counter+"' value='Books' >Books"+
    		   " </td>"+
    		   "</tr>";
    		   document.getElementById("tbodyM").appendChild(newRow);
    		   counter++;
    	   }
    	}
    	
    	function edit_mo(name){
    		altFormAction('ModifyMMBServlet');
    		scanDeleteModify();
    		
    		var exists = dataM.indexOf(name);
    		
    		 if(exists == -1){
        		   dataM.push(name);
        		   
        		 var newRow = document.createElement('tr');
    		   newRow.innerHTML = "<tr><td>Old name: <input type='text' name='nameOJAV"+counter+"' value='"+name+"' readonly size='40'> New name:<input type='text' name='nameJAV"+counter+"' value='"+name+"' id='nameJAV"+counter+"' onchange='enableButton("+counter+");' placeholder='Name' size='40'></td>"+
    		   "<td><input type='radio' name='typeJAV"+counter+"' value='Music'>Music"+
    		   "<input type='radio' name='typeJAV"+counter+"' value='Movies' checked='checked'>Movies"+
    		   "<input type='radio' name='typeJAV"+counter+"' value='Books' >Books"+
    		   " </td>"+
    		   "</tr>";
    		   document.getElementById("tbodyM").appendChild(newRow);
    		   counter++;
        	   }
    	}
    	
    	function edit_bo(name){
    		altFormAction('ModifyMMBServlet');
    		scanDeleteModify();
    		
    		 var exists = dataM.indexOf(name);
      	   
      	   if(exists == -1){
      		   dataM.push(name);
      		   
      		 var newRow = document.createElement('tr');
  		   newRow.innerHTML = "<tr><td>Old name: <input type='text' name='nameOJAV"+counter+"' value='"+name+"' readonly size='40'> New name:<input type='text' name='nameJAV"+counter+"' value='"+name+"' id='nameJAV"+counter+"' onchange='enableButton("+counter+");' placeholder='Name' size='40'></td>"+
  		   "<td><input type='radio' name='typeJAV"+counter+"' value='Music' >Music"+
  		   "<input type='radio' name='typeJAV"+counter+"' value='Movies'>Movies"+
  		   "<input type='radio' name='typeJAV"+counter+"' value='Books' checked='checked'>Books"+
  		   " </td>"+
  		   "</tr>";
  		   document.getElementById("tbodyM").appendChild(newRow);
  		   counter++;
      	   }
    	}
    	
    	function deleteMMB(name){
    		altFormAction('DeleteMMBServlet');
    		scanDeleteDelete();
    		
    		var exists = dataD.indexOf(name);
       	   
       	   if(exists == -1){
       		   dataD.push(name);
       		   
       		var newRow = document.createElement('tr');
    		newRow.innerHTML = "<tr><td>Preference to delete: </td><td><input type='text' name='nameJAV"+counter1+"' value='"+name+"' id='nameJAV"+counter1+"' readonly placeholder='Name' size='40'></td></tr>";
    		document.getElementById("tbodyM").appendChild(newRow);
    		counter1++;
       	   }
    	}
    	
    	
    
    </script>

</body>
</html>